// Namespace
var sj = sj || {};

sj.interactivity = function () {
	/**
	 * Add hover functionality to map layers 
	 */

	var eu_countries = document.getElementById('eu_countries'),
		children = eu_countries.childNodes,
		legendrectangles = document.getElementById('legendrectangles'),
		rectangles = legendrectangles.childNodes,
        highlight_colour = 'yellow',
		myattribNS = 'http://www.carto.net/attrib/';
				
	function updateInfotext(value) {
		document.getElementById('infotext').firstChild.nodeValue = value;
	}

	function highlight(node, remove) {
		var colour = highlight_colour;

		if (arguments.length === 2 && remove === true) {

			if (node.previous_fill) {
				colour = node.previous_fill;
				delete node.previous_fill;
			} else {
				colour = '';
			}
		} else { 
				
			if (node.getAttributeNS(null,'fill') !== '') {
				node.previous_fill = node.getAttributeNS(null,'fill');
			}
		}
		
		node.setAttribute('fill', colour);
	}
	
	function removeHighlight(node) {
		highlight(node, true);
	}

    /**
     * Highlights rectangle colour in sidebar
     * @method setRectangleHightlight
     * @param rectangles document.getElementById('legendrectangles').childNodes
     * @param country
     * @param colour
     */
    function setRectangleHightlight(rectangles, country, colour) {
		
        for (var j = 0, len = rectangles.length; j < len; j++) {

            (function (j) {
                if (rectangles[j].tagName === 'rect') {
                    var rectfill = rectangles[j].getAttributeNS(null,'fill');
					
                    if (rectfill === colour) {
                        rectangles[j].setAttribute('fill', highlight_colour);
                        rectangles[j].previous_fill = rectfill;
						
						// Add rectangle reference to country
						country.current_rectangle = rectangles[j];
                    }
                }
            }(j));
        }
    }
	
	for (var i = 0, len = children.length; i < len; i++) {
		(function (i) {

			if (children[i].tagName === 'path') {
	
				var country_name = children[i].getAttributeNS(myattribNS, 'ctry_name');
				
				if (window.addEventListener) {
			
					// Mouseover
					children[i].addEventListener("mouseover", function () {

						updateInfotext(country_name);
						highlight(children[i]);
						
                        setRectangleHightlight(rectangles, children[i], children[i].previous_fill);

							
					}, false); 
					
					// Mouseout
					children[i].addEventListener("mouseout", function () {

						// Clear value on mouseout
						updateInfotext('');
						removeHighlight(children[i]);
						
						
                        if (children[i].current_rectangle) {
							var cr = children[i].current_rectangle;
							cr.setAttribute('fill',cr.previous_fill);
                    
                            delete children[i].current_rectangle;
                        }


					}, false);
				}
			}
		}(i));

	}
	
	
	
	
	var get_colour_railway_passengerkm_per_person = function (n) {
				
		var colour;
		
		if (n > 1000){
			colour='indigo';
		}

		if (n < 1000 && n>750){
			colour='#65138E';
		}

		if (n < 750 && n>500){
			colour='#8341A5';
		}

		if (n < 500 && n>250){
			colour='#B387CA';
		}

		if (n < 250 && n>1){
			colour='thistle';
		}

		if (n < 1){
			colour='beige';
		}
		
		return colour;
	}
	
	var n_to_year_mapping = function (year) {
		var n_to_year_map = {
			'2004' : 'n2',
			'2005' : 'n3',
			'2006' : 'n4',
			'2007' : 'n5',
			'2008' : 'n6',
			'2009' : 'n7'
		};
		
		return n_to_year_map[year];
	}

	var set_colour_by_year = function(selected_year) {
		var eu_countries = document.getElementById('eu_countries'),
		children = eu_countries.childNodes;
		
		for (var i = 0, len = children.length; i < len; i++) {
			(function (i) {
				if (children[i].tagName === 'path') {
					var country_name = children[i].getAttributeNS(myattribNS, 'ctry_name');
					
					var n = children[i].getAttributeNS(myattribNS, n_to_year_mapping(selected_year));
					
					children[i].setAttribute('fill', get_colour_railway_passengerkm_per_person(n));
					
				}	
			}(i));

		}					
							
	};

				
	// This is an empty constructor
	function yearResult() {}

	//Add public method "getSelectionListVal" to constructor
	yearResult.prototype.getSelectionListVal = function(selBoxName,yearNr,arrayVal) {
		var selectedYear = arrayVal;
		set_colour_by_year(selectedYear);						
	};

	var yearCallback = new yearResult();
	sj.yearCallback = yearCallback;
					
				
		
	

	
	//toggle layers
	sj.toggle_rivers = function (id, status, label) {
        var display = '';
        display = status ? 'inline' : 'none';
        document.getElementById('eu_rivers').setAttributeNS(null,"display", display);
    };

    
    sj.toggle_diagram = function (id, status, label) {
        var display = '';
        display = status ? 'inline' : 'none';
        document.getElementById('diagram').setAttributeNS(null,"display", display);


    };
	

	
};

// load WMSimage
//function getWMSImage() {
//    //get diagrams
//    var myRasterLayer = document.getElementById("WMS");
//
//    if (myRasterLayer.childNodes.length > 0) {
//		alert('Hi Sven');
//        var oldImage = document.getElementById("WMSImage");
//        myRasterLayer.removeChild(oldImage);
//    }
//    if (document.getElementById("WMS").getAttributeNS(null, "visibility") == "visible") { 
//        var myDiagram = document.createElementNS(svgNS, "image");
//        myDiagram.setAttributeNS(null, "x", myMainMap.curxOrig);
//        myDiagram.setAttributeNS(null, "y", myMainMap.curyOrig);
//        myDiagram.setAttributeNS(null, "width", myMainMap.curWidth);
//        myDiagram.setAttributeNS(null, "height", myMainMap.curHeight);
//        myDiagram.setAttributeNS(null, "id", "WMSImage");
//        var myDiagramUrl = "http://karlinapp.ethz.ch/fcgi-bin/qgis_map_server/mmkarto2011_jsven/qgis_map_serv.fcgi?SERVICE=WMS&Version=1.3.0&REQUEST=GetMap&LAYERS=piecharts&TRANSPARENT=true&STYLES=piestyle&EPSG:" + myMainMap.epsg;
//        myDiagramUrl += "&BBOX=" + (parseFloat(myMainMap.curyOrig + myMainMap.curHeight) * - 1) + "," + parseFloat(myMainMap.curxOrig);
//        myDiagramUrl += "," + (parseFloat(myMainMap.curyOrig) * - 1) + "," + parseFloat(myMainMap.curxOrig + myMainMap.curWidth);
//        myDiagramUrl += "&width=" + myMainMap.pixWidth + "&height=" + myMainMap.pixHeight + "&format=image/png";
//        myDiagram.setAttributeNS(xlinkNS, "xlink:href", myDiagramUrl);
//        myRasterLayer.appendChild(myDiagram);
//    }
//}


